<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方法学管理页面字典数据测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        h1, h2 {
            color: #333;
        }
        .api-section {
            margin-bottom: 30px;
        }
        .api-url {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            margin: 10px 0;
        }
        .response {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin: 10px 0;
            max-height: 400px;
            overflow-y: auto;
        }
        .btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .btn:hover {
            background: #0056b3;
        }
        .btn-success {
            background: #28a745;
        }
        .btn-success:hover {
            background: #1e7e34;
        }
        .status {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .dict-section {
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 10px 0;
            padding: 15px;
        }
        .dict-section h3 {
            margin: 0 0 10px 0;
            color: #007bff;
        }
        .dict-items {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
        }
        .dict-item {
            background: #f8f9fa;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #e9ecef;
        }
        .dict-item .value {
            font-weight: bold;
            color: #007bff;
        }
        .dict-item .label {
            color: #333;
        }
        .methodology-section {
            border: 1px solid #28a745;
            border-radius: 4px;
            margin: 10px 0;
            padding: 15px;
            background: #f8fff8;
        }
        .methodology-section h3 {
            margin: 0 0 10px 0;
            color: #28a745;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>方法学管理页面字典数据测试</h1>
        <p>此页面用于测试方法学管理页面的字典数据加载和显示功能</p>
        
        <div class="api-section">
            <h2>1. 测试分组字典接口</h2>
            <div class="api-url">
                GET http://localhost:9002/system/sysDict/getAllDictGrouped
            </div>
            <button class="btn" onclick="testGroupedDict()">测试分组字典接口</button>
            <div id="grouped-status" class="status" style="display: none;"></div>
            <div id="grouped-response" class="response" style="display: none;"></div>
        </div>

        <div class="api-section">
            <h2>2. 测试方法学搜索接口</h2>
            <div class="api-url">
                POST http://localhost:9002/carbonMethodology/getEscarbonMethodologyByKeyword
            </div>
            <button class="btn" onclick="testMethodologySearch()">测试方法学搜索</button>
            <div id="methodology-status" class="status" style="display: none;"></div>
            <div id="methodology-response" class="response" style="display: none;"></div>
        </div>

        <div class="api-section">
            <h2>3. 字典数据展示</h2>
            <button class="btn btn-success" onclick="displayDictData()">展示字典数据</button>
            <div id="dict-display"></div>
        </div>

        <div class="api-section">
            <h2>4. 方法学管理页面模拟</h2>
            <button class="btn btn-success" onclick="simulateMethodManager()">模拟方法学管理页面</button>
            <div id="method-manager-sim"></div>
        </div>
    </div>

    <script>
        let groupedData = null;
        let methodologyData = null;

        async function testGroupedDict() {
            const statusDiv = document.getElementById('grouped-status');
            const responseDiv = document.getElementById('grouped-response');
            
            statusDiv.style.display = 'block';
            statusDiv.className = 'status';
            statusDiv.textContent = '正在请求分组字典接口...';
            
            try {
                const response = await fetch('http://localhost:9002/system/sysDict/getAllDictGrouped');
                const data = await response.json();
                
                if (response.ok) {
                    statusDiv.className = 'status success';
                    statusDiv.textContent = '分组字典接口请求成功！';
                    groupedData = data.data;
                } else {
                    statusDiv.className = 'status error';
                    statusDiv.textContent = `请求失败: ${data.msg || '未知错误'}`;
                }
                
                responseDiv.style.display = 'block';
                responseDiv.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                statusDiv.className = 'status error';
                statusDiv.textContent = `请求失败: ${error.message}`;
                responseDiv.style.display = 'block';
                responseDiv.textContent = error.toString();
            }
        }

        async function testMethodologySearch() {
            const statusDiv = document.getElementById('methodology-status');
            const responseDiv = document.getElementById('methodology-response');
            
            statusDiv.style.display = 'block';
            statusDiv.className = 'status';
            statusDiv.textContent = '正在请求方法学搜索接口...';
            
            try {
                const requestData = {
                    asc: true,
                    fieldCode: "",
                    industryCode: "",
                    searchKey: "",
                    size: 10,
                    statusCode: "",
                    current: 1
                };
                
                const response = await fetch('http://localhost:9002/carbonMethodology/getEscarbonMethodologyByKeyword', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(requestData)
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    statusDiv.className = 'status success';
                    statusDiv.textContent = '方法学搜索接口请求成功！';
                    methodologyData = data.data;
                } else {
                    statusDiv.className = 'status error';
                    statusDiv.textContent = `请求失败: ${data.msg || '未知错误'}`;
                }
                
                responseDiv.style.display = 'block';
                responseDiv.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                statusDiv.className = 'status error';
                statusDiv.textContent = `请求失败: ${error.message}`;
                responseDiv.style.display = 'block';
                responseDiv.textContent = error.toString();
            }
        }

        function displayDictData() {
            const displayDiv = document.getElementById('dict-display');
            
            if (!groupedData) {
                displayDiv.innerHTML = '<div class="status error">请先获取分组字典数据</div>';
                return;
            }

            let html = '<h3>分组字典数据展示</h3>';
            
            // 按字典类型分组显示
            const dictTypes = {
                '002': { name: '行业字典', items: [] },
                '003': { name: '领域字典', items: [] },
                '007': { name: '核证标准字典', items: [] },
                '0450000001': { name: '方法学状态字典', items: [] }
            };
            
            groupedData.forEach(group => {
                if (dictTypes[group.dictCode]) {
                    dictTypes[group.dictCode].items = group.items || [];
                }
            });
            
            Object.keys(dictTypes).forEach(dictCode => {
                const dictType = dictTypes[dictCode];
                html += `
                    <div class="dict-section">
                        <h3>${dictType.name} (${dictCode})</h3>
                        <p>包含 ${dictType.items.length} 个字典项</p>
                        <div class="dict-items">
                `;
                
                if (dictType.items.length > 0) {
                    dictType.items.forEach(item => {
                        html += `
                            <div class="dict-item">
                                <div class="value">${item.value}</div>
                                <div class="label">${item.name}</div>
                            </div>
                        `;
                    });
                } else {
                    html += '<div class="dict-item">暂无数据</div>';
                }
                
                html += '</div></div>';
            });
            
            displayDiv.innerHTML = html;
        }

        function simulateMethodManager() {
            const displayDiv = document.getElementById('method-manager-sim');
            
            if (!groupedData) {
                displayDiv.innerHTML = '<div class="status error">请先获取分组字典数据</div>';
                return;
            }

            let html = '<div class="methodology-section">';
            html += '<h3>方法学管理页面模拟</h3>';
            html += '<p>模拟方法学管理页面的筛选条件显示</p>';
            
            // 模拟筛选条件
            html += '<div style="margin: 20px 0;">';
            html += '<h4>筛选条件：</h4>';
            
            // 核证标准
            const certificationDict = groupedData.find(d => d.dictCode === '007');
            if (certificationDict && certificationDict.items) {
                html += '<div style="margin: 10px 0;">';
                html += '<strong>核证标准：</strong>';
                html += '<select style="margin-left: 10px; padding: 5px;">';
                html += '<option value="">全部</option>';
                certificationDict.items.forEach(item => {
                    html += `<option value="${item.value}">${item.name}</option>`;
                });
                html += '</select>';
                html += '</div>';
            }
            
            // 领域
            const fieldDict = groupedData.find(d => d.dictCode === '003');
            if (fieldDict && fieldDict.items) {
                html += '<div style="margin: 10px 0;">';
                html += '<strong>领域：</strong>';
                html += '<select style="margin-left: 10px; padding: 5px;">';
                html += '<option value="">全部</option>';
                fieldDict.items.forEach(item => {
                    html += `<option value="${item.value}">${item.name}</option>`;
                });
                html += '</select>';
                html += '</div>';
            }
            
            // 行业
            const industryDict = groupedData.find(d => d.dictCode === '002');
            if (industryDict && industryDict.items) {
                html += '<div style="margin: 10px 0;">';
                html += '<strong>行业：</strong>';
                html += '<select style="margin-left: 10px; padding: 5px;">';
                html += '<option value="">全部</option>';
                industryDict.items.forEach(item => {
                    html += `<option value="${item.value}">${item.name}</option>`;
                });
                html += '</select>';
                html += '</div>';
            }
            
            // 状态
            const statusDict = groupedData.find(d => d.dictCode === '0450000001');
            if (statusDict && statusDict.items) {
                html += '<div style="margin: 10px 0;">';
                html += '<strong>状态：</strong>';
                html += '<select style="margin-left: 10px; padding: 5px;">';
                html += '<option value="">全部</option>';
                statusDict.items.forEach(item => {
                    html += `<option value="${item.value}">${item.name}</option>`;
                });
                html += '</select>';
                html += '</div>';
            }
            
            html += '</div>';
            
            // 显示方法学数据
            if (methodologyData && methodologyData.data) {
                html += '<div style="margin: 20px 0;">';
                html += '<h4>方法学数据：</h4>';
                html += `<p>共找到 ${methodologyData.total || 0} 条记录</p>`;
                
                if (methodologyData.data.length > 0) {
                    html += '<table border="1" style="width: 100%; border-collapse: collapse; margin-top: 10px;">';
                    html += '<tr style="background: #f2f5f7;"><th>方法学编码</th><th>方法学名称</th><th>领域</th><th>状态</th></tr>';
                    
                    methodologyData.data.slice(0, 5).forEach(item => {
                        html += `<tr>`;
                        html += `<td>${item.methodCode || '--'}</td>`;
                        html += `<td>${item.name || '--'}</td>`;
                        html += `<td>${item.fieldCode || '--'}</td>`;
                        html += `<td>${item.statusCode || '--'}</td>`;
                        html += `</tr>`;
                    });
                    
                    html += '</table>';
                } else {
                    html += '<p>暂无方法学数据</p>';
                }
                html += '</div>';
            }
            
            html += '</div>';
            displayDiv.innerHTML = html;
        }

        // 页面加载时自动测试分组字典接口
        window.onload = function() {
            console.log('页面加载完成，可以开始测试接口');
        };
    </script>
</body>
</html>
